<template>
    <div>
      <q-carousel
          animated
          v-model="slide"
          arrows
          navigation
          infinite
          height="1030px"
          transition-prev="slide-right"
          transition-next="slide-left"
      >
<!--        :autoplay="2500"-->
        <q-carousel-slide :name="index" v-for="(imgObj, index) in image_list" :key="index" :img-src="imgObj.img">
          <div class="absolute-bottom custom-caption">
            <div class="text-h2">{{imgObj.title}}</div>
            <div class="text-subtitle1">{{imgObj.mark}}</div>
          </div>
        </q-carousel-slide>
      </q-carousel>
    </div>
</template>

<script setup lang="ts" name="aplusmax-carousel">
import { ref, defineExpose, reactive } from 'vue'

const slide = ref(1)
const image_list = reactive([
  {img: "https://cdn.quasar.dev/img/mountains.jpg", title: "First stop", mark: "Mountains"},
  {img: "https://cdn.quasar.dev/img/parallax1.jpg", title: "Second stop", mark: "Famous City"},
  {img: "https://cdn.quasar.dev/img/parallax2.jpg", title: "Third stop", mark: "Famous Bridge"},
  {img: "https://cdn.quasar.dev/img/quasar.jpg", title: "fuck stop", mark: "quasar"}
])

</script>
<style scoped lang="less">
.custom-caption {
  text-align: center;
  padding: 80px;
  color: white;
  background-color: rgba(0, 0, 0, .3);
}
</style>
